<template>
  <div class="home">
    <!-- banner及介绍 -->
    <div class="banner">
      <div class="introduction">
        <p>欢迎来到海洋启明星</p>
        <p>在这里你可以了解海洋的相关知识</p>
        <p>搜索你感兴趣的内容</p>
        <p>发表你对相关内容的观点</p>
        <p>希望你可以在这里爱上海洋</p>
      </div>
    </div>
    <!-- 展示区 -->
    <div class="show">
      <!-- 海洋资讯，各种各样，关于海洋资源或海洋环境 -->
      <div class="information">
        <h1>最新资讯</h1>
        <a href="" class="more">查看更多></a>
        <Info :informations="informations" />
      </div>
      <!-- 少见的海洋 -->
      <div class="rare-ocean">
        <h1>海洋奇观</h1>
        <a href="" class="more">查看更多></a>
        <Ocean :oceans="oceans" />
      </div>
      <!-- 少见的海洋生物 -->
      <div class="rare-animal">
        <h1>海洋生物</h1>
        <a href="" class="more">查看更多></a>
        <Animal :animals="animals" />
      </div>
      <!-- 用户发表的文章 -->
      <div class="article">
        <h1>有意思的文章</h1>
        <a href="" class="more">查看更多></a>
        <Article :articles="articles"/>
      </div>
      <!-- 待定：清理海洋垃圾等志愿活动 -->
      <div class="voluntary">
        <h1>志愿活动</h1>
        <a href="" class="more">查看更多></a>
        <Voluntary :voluntaries="voluntaries" />
      </div>
    </div>
  </div>
</template>

<script>
  import Info from 'components/info/Info'
  import Ocean from 'components/ocean/Ocean'
  import Animal from 'components/animal/Animal'
  import Article from 'components/article/Article'
  import Voluntary from 'components/voluntary/Voluntary'
  export default {
   name: 'Home' ,
   components: {
     Info,
     Ocean,
     Animal,
     Article,
     Voluntary
   },
   data() {
     return {
       informations: [
         {
           id: 1,
           imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F092919113248%2F1Z929113248-8-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647748041&t=1a9f454e545e640d10a88c8c035816e6',
           title: '标题标题标题标题标题标题标题标题标题',
           content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
           author: '官方账号',
           createTime: '2022-10-2'
         },
         {
           id: 1,
           imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F092919113248%2F1Z929113248-8-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647748041&t=1a9f454e545e640d10a88c8c035816e6',
           title: '标题标题标题标题标题标题标题标题标题',
           content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
           author: '官方账号',
           createTime: '2022-10-2'
         }
       ],
       oceans: [
         {
           id: 1,
           imgUrl: 'http://5b0988e595225.cdn.sohucs.com/images/20181027/8f9ac14083a34cd28719bf6510b02406.gif',
           title: '水龙卷',
           content: '水龙卷俗称龙吸水或龙吊水等。水龙卷(waterspout)是一种偶尔出现在温暖水面上空的龙卷风，它的上端与雷雨云相接，下端直接延伸到水面，一边旋转，一边移动。饱含水气快速旋转的气柱状水龙卷，危险程度不亚于龙卷风，内部风速可超过每小时二百公里。'
         },
         {
           id: 2,
           imgUrl: 'http://5b0988e595225.cdn.sohucs.com/images/20181027/8f9ac14083a34cd28719bf6510b02406.gif',
           title: '水龙卷',
           content: '水龙卷俗称龙吸水或龙吊水等。水龙卷(waterspout)是一种偶尔出现在温暖水面上空的龙卷风，它的上端与雷雨云相接，下端直接延伸到水面，一边旋转，一边移动。饱含水气快速旋转的气柱状水龙卷，危险程度不亚于龙卷风，内部风速可超过每小时二百公里。'
         },
         {
           id: 3,
           imgUrl: 'http://5b0988e595225.cdn.sohucs.com/images/20181027/8f9ac14083a34cd28719bf6510b02406.gif',
           title: '水龙卷',
           content: '水龙卷俗称龙吸水或龙吊水等。水龙卷(waterspout)是一种偶尔出现在温暖水面上空的龙卷风，它的上端与雷雨云相接，下端直接延伸到水面，一边旋转，一边移动。饱含水气快速旋转的气柱状水龙卷，危险程度不亚于龙卷风，内部风速可超过每小时二百公里。'
         },
         {
           id: 4,
           imgUrl: 'http://5b0988e595225.cdn.sohucs.com/images/20181027/8f9ac14083a34cd28719bf6510b02406.gif',
           title: '水龙卷水龙卷水龙卷水龙卷',
           content: '水龙卷俗称龙吸水或龙吊水等。水龙卷(waterspout)是一种偶尔出现在温暖水面上空的龙卷风，它的上端与雷雨云相接，下端直接延伸到水面，一边旋转，一边移动。饱含水气快速旋转的气柱状水龙卷，危险程度不亚于龙卷风，内部风速可超过每小时二百公里。'
         }
       ],
       animals: [
         {
           id: 1,
           imgUrl: 'http://www.52qixiang.com/uploads/allimg/200611/1-2006111Q456.jpg',
           title: '加湾鼠海豚',
           content: '加湾鼠海豚由于栖息的范围狭小，并且习惯暖水区，渔民在捕捞的时候很容易将其困入网中，加上环境的污染以及恶意的捕杀，成为了加湾鼠海豚面临灭绝的主要原因。'
         },
         {
           id: 2,
           imgUrl: 'http://www.52qixiang.com/uploads/allimg/200611/1-2006111Q456.jpg',
           title: '加湾鼠海豚',
           content: '加湾鼠海豚由于栖息的范围狭小，并且习惯暖水区，渔民在捕捞的时候很容易将其困入网中，加上环境的污染以及恶意的捕杀，成为了加湾鼠海豚面临灭绝的主要原因。'
         },
         {
           id: 3,
           imgUrl: 'http://www.52qixiang.com/uploads/allimg/200611/1-2006111Q456.jpg',
           title: '加湾鼠海豚',
           content: '加湾鼠海豚由于栖息的范围狭小，并且习惯暖水区，渔民在捕捞的时候很容易将其困入网中，加上环境的污染以及恶意的捕杀，成为了加湾鼠海豚面临灭绝的主要原因。'
         },
         {
           id: 4,
           imgUrl: 'http://www.52qixiang.com/uploads/allimg/200611/1-2006111Q456.jpg',
           title: '加湾鼠海豚',
           content: '加湾鼠海豚由于栖息的范围狭小，并且习惯暖水区，渔民在捕捞的时候很容易将其困入网中，加上环境的污染以及恶意的捕杀，成为了加湾鼠海豚面临灭绝的主要原因。'
         }
       ],
       articles: [
         {
           id: 1,
           imgUrl: '',
           title: '标题标题标题标题',
           content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
           author: 'mqe2'
         },
          {
            id: 2,
            imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F092919113248%2F1Z929113248-8-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647748041&t=1a9f454e545e640d10a88c8c035816e6',
            title: '标题标题标题标标',
            content: '文章文章文章文章文章章文章文章文章文章文章文章文章文章文章',
            author: 'mqe2'
          },
          {
            id: 3,
            imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242326224L3-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647748041&t=176dd056a3706a78d9c4610bc4ad8ee8',
            title: '标题标题标题标题标题标题标题标题标题',
            content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
            author: 'mqe2'
          },
          {
            id: 4,
            imgUrl: '',
            title: '标题标题标题标题标题标题标题标题标题',
            content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
            author: 'mqe2'
          },
          {
            id: 5,
            imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242326224L3-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647748041&t=176dd056a3706a78d9c4610bc4ad8ee8',
            title: '标题标题标题标题标题标题标题标题标题',
            content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
            author: 'mqe2'
          },
          {
            id: 6,
            imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242326224L3-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647748041&t=176dd056a3706a78d9c4610bc4ad8ee8',
            title: '标题标题标题标题标题标题标题标题标题',
            content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
            author: 'mqe2'
          },
        ],
       voluntaries: [
         {
           id: 1,
           imgUrl: 'http://5b0988e595225.cdn.sohucs.com/images/20181027/8f9ac14083a34cd28719bf6510b02406.gif',
           title: '海洋垃圾清理活动',
           content: '一起清理海洋垃圾',
           promoter: '官方',   // 活动发起人
           startTime: '2022-10-1',
           endTime: '2022-10-7',
           needNum: 10,
           place: 'xx省xx市xx区xx镇'
         },
         {
           id: 1,
           imgUrl: 'http://5b0988e595225.cdn.sohucs.com/images/20181027/8f9ac14083a34cd28719bf6510b02406.gif',
           title: '海洋垃圾清理活动',
           content: '一起清理海洋垃圾',
           promoter: '官方',   // 活动发起人
           startTime: '2022-10-1',
           endTime: '2022-10-7',
           needNum: 10,
           place: 'xx省xx市xx区xx镇'
         }
       ]
     }
   }
  }
</script>

<style scoped>
  .banner {
    height: 650px;
    background: url("~assets/img/banner.jpg") center center no-repeat;
  }

  .introduction {
    line-height: 50px;
    color: #fff;
    font-family: '华文楷体';
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 5px;
    padding-top: 300px;
    padding-left: 60px;
  }

  .show {
    letter-spacing: 2px;
    margin: 100px 100px 50px;
  }

  .show>div {
    position: relative;
    margin-bottom: 100px;
  }

  .show>div>h1 {
    border-bottom: 1px solid #9CA3AF;
    padding-bottom: 10px;
  }

  .show>div>.more {
    position: absolute;
    top: 25px;
    right: 5px;
    font-size: 14px;
  }

  .show>div>.more:hover {
    color: #86a3b1;
  }
</style>